<!DOCTYPE html>
<html lang="en">

<head>
    <title>个人信息</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="../../js/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="../../css/public.css">
    <link rel="stylesheet" href="../../css/jquery.Jcrop.css" type="text/css" />

    <link rel="stylesheet" id="pageloader-css" href="../../css/pageloader.css" type="text/css" media="all" />
    <script src="../../js/jquery.Jcrop.js"></script>

    <style>
        body {
            margin-bottom: 0;
        }

        .register_bg {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            background: linear-gradient(-45deg, #160034, #00113E);
            background: -moz-linear-gradient(top, #160034, rgba(#00113E));
            background: -o-linear-gradient(top, #160034, rgba(#00113E));
            z-index: 1;
        }

        .home_zhangdui_nav {
            overflow: hidden;
            background: url('../../images/reg/back.png') 10px center no-repeat;
            border-bottom: 1px solid #24254E;
            background-size: 0.7rem;
        }

        .title {
            width: 80%;
            line-height: 40px;
            text-align: center;
            font-size: .4rem;
            background: url(../../images/rank/title.png) center center no-repeat;
            background-size: 7.5rem;
            margin: 10px auto;
            margin-top: 70px;
        }

        .info_list {
            margin-top: 80px;
            background: #121d5d
        }

        .info_list>div {
            height: 60px;
            border-bottom: 1px solid #2a2b6b;
            line-height: 60px;
            overflow: hidden;
            padding-left: 3%;
            color: #D0C7EF;
            font-size: .45rem;
            background: url(../../images/personal/icon_back.png) 95% center no-repeat;
            background-size: .3rem;
        }

        .right1 {
            float: right;
            margin-right: 10%;
        }

        .model {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 9;
            display: none;
        }

        .name_model>div {
            width: 250px;
            height: 220px;
            background: #1b1d68;
            margin: 0 auto;
            margin-top: 50%;
            text-align: center;
            font-size: .5rem;
            color: #eae3ff;
            z-index: 11;

        }

        .sex_model>div {
            background: #2b2d69;
            position: absolute;
            bottom: 0;
            width: 100%;
        }

        .sex_model>div>div {
            background: #1B1D68;
            height: 55PX;
            line-height: 55px;
            text-align: center;
            font-size: .45rem;
            font-weight: 540;
        }

        .man {
            color: #1DA8FF;
            border-bottom: 1px solid #2a2b6b;

        }

        .woman {
            color: #EB51F9;
            margin-bottom: 10PX;
        }

        .logo_model>div {
            background: #2b2d69;
            position: absolute;
            bottom: 0;
            width: 100%;
        }

        .logo_model>div>div {
            background: #1B1D68;
            height: 55PX;
            line-height: 55px;
            text-align: center;
            font-size: .45rem;
            font-weight: 540;
        }

        .logo_model .photo {
            margin-bottom: 10PX;
        }

        .model .edit {
            height: 70PX;
            line-height: 70px;
        }

        .doCancel {
            letter-spacing: 3px;
            color: #D0C7EF;
        }

        .model input {

            width: 80%;
            margin: auto;
            display: block;
            height: 37px;
            background: #121459;
            border: 0;
            color: #eae3ff;
            text-align: center;
            margin-bottom: 40px;
        }

        .model .cancel,
        .model .confirm {
            height: 37px;
            width: 33%;
            background: #1B1D68;
            border: 1px solid #6c6fc7;
            color: #eae3ff;
            font-size: .42rem;
        }

        .model .cancel {
            float: left;
            margin-left: 10%;
        }

        .model .confirm {
            float: right;
            margin-right: 10%;
        }

        .photo {
            position: relative;
            color: #D0C7EF;
        }

        #thumbnail {
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
        }

        .loading {
            width: 25%;
            margin: auto;
            display: block;
            margin-top: 60%;

        }

        .picture_model {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 20%;
            height: 100%;
            /* opacity: 0; */
            z-index: 9999;
            display: none;
        }

        .cancelPic {
            position: absolute;
            bottom: 2%;
            width: 20%;
            margin: auto;
            background: #d2cccc;
            z-index: 99999;
            font-size: .4rem;
            line-height: 37px;
            border-radius: 3px;
            color: #504343;
            text-align: center;
            left: 5%;
        }

        .addPic {
            position: absolute;
            bottom: 2%;
            width: 20%;
            margin: auto;
            background: #FFB400;
            z-index: 99999;
            font-size: .4rem;
            line-height: 37px;
            ;
            border-radius: 3px;
            right: 5%;
            text-align: center;
            color: #131313;
        }

        #target {
            height: 100%;
            width: auto;
        }
    </style>
</head>

<body>
    <!-- 模态框 -->
    <div class="model name_model">
        <div>
            <div class="edit">编辑昵称</div>
            <input class="changeUserName" type="text" name="" value="LYLSP_288544" id="">
            <div>
                <button class="cancel">取消</button>
                <button class="confirm ">确定</button>
            </div>
        </div>
    </div>
    <!--加载 -->
    <div id="bonfire-pageloader">
        <div class="bonfire-pageloader-icon">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="512px"
                height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
                <path id="loading-12-icon" d="M291,82.219c0,16.568-13.432,30-30,30s-30-13.432-30-30s13.432-30,30-30S291,65.65,291,82.219z
                 M261,404.781c-15.188,0-27.5,12.312-27.5,27.5s12.312,27.5,27.5,27.5s27.5-12.312,27.5-27.5S276.188,404.781,261,404.781z
                 M361.504,113.167c-4.142,7.173-13.314,9.631-20.487,5.489c-7.173-4.141-9.631-13.313-5.49-20.487
                c4.142-7.173,13.314-9.631,20.488-5.489C363.188,96.821,365.645,105.994,361.504,113.167z M188.484,382.851
                c-14.348-8.284-32.697-3.368-40.98,10.98c-8.285,14.349-3.367,32.696,10.98,40.981c14.35,8.283,32.697,3.367,40.98-10.981
                C207.75,409.482,202.834,391.135,188.484,382.851z M421.33,184.888c-8.368,4.831-19.07,1.965-23.901-6.404
                c-4.832-8.368-1.965-19.07,6.404-23.902c8.368-4.831,19.069-1.964,23.9,6.405C432.566,169.354,429.699,180.056,421.33,184.888z
                 M135.399,329.767c-8.285-14.35-26.633-19.266-40.982-10.982c-14.348,8.285-19.264,26.633-10.979,40.982
                c8.284,14.348,26.632,19.264,40.981,10.98C138.767,362.462,143.683,344.114,135.399,329.767z M436.031,277.249
                c-11.044,0-20-8.953-20-19.999c0-11.045,8.955-20.001,20.001-20.001c11.044,0,19.999,8.955,19.999,20.002
                C456.031,268.295,447.078,277.249,436.031,277.249z M115.97,257.251c-0.001-16.57-13.433-30.001-30.001-30.002
                c-16.568,0.001-29.999,13.432-30,30.002c0.001,16.566,13.433,29.998,30.001,30C102.538,287.249,115.969,273.817,115.97,257.251z
                 M401.333,364.248c-10.759-6.212-14.446-19.97-8.234-30.73c6.212-10.759,19.971-14.446,30.731-8.233
                c10.759,6.211,14.445,19.971,8.232,30.73C425.852,366.774,412.094,370.46,401.333,364.248z M135.398,184.736
                c8.285-14.352,3.368-32.698-10.98-40.983c-14.349-8.283-32.695-3.367-40.981,10.982c-8.282,14.348-3.366,32.696,10.981,40.981
                C108.768,204,127.115,199.082,135.398,184.736z M326.869,421.328c-6.902-11.953-2.807-27.242,9.148-34.145
                s27.243-2.806,34.146,9.149c6.902,11.954,2.806,27.243-9.15,34.145C349.059,437.381,333.771,433.284,326.869,421.328z
                 M188.482,131.649c14.352-8.286,19.266-26.633,10.982-40.982c-8.285-14.348-26.631-19.264-40.982-10.98
                c-14.346,8.285-19.264,26.633-10.98,40.982C155.787,135.017,174.137,139.932,188.482,131.649z" />
            </svg>

        </div>

    </div>
    <!--加载 -->

    <div class="picture_model">
        <img src="" id="target" alt="">
        <div class="doCancel cancelPic">取消</div>

        <div class="addPic">确认上传</div>
    </div>
    

    <div class="model sex_model">
        <div class="confirmSex">
            <div class="man">男</div>
            <div class="woman">女</div>
            <div class="doCancel">取消</div>
        </div>
    </div>
    <div class="model logo_model">

        <div>

            <div class="photo">
                <input type="file" class="form-control" id="thumbnail" name="thumbnail"> 从相册获取
            </div>
            <div class="doCancel">取消</div>
        </div>
    </div>

    <div class="register_bg">

        <div class="home_zhangdui_nav">
            <span class="goBack"></span>
            个人信息
        </div>

        <div class="info_list">
            <div class="name_list">
                修改昵称
                <span class="userName right1">LYLSP_288544</span>
            </div>

            <div class="sex_list">
                修改性别
                <span class="userSex right1">男</span>
            </div>
            <div class="logo_list">
                修改头像
            </div>
        </div>
    </div>

    <script src="../../js/public.js"></script>
    <script src="../../js/jquery.color.js"></script>
    <script>
        $(function () {
            jQuery(window).resize(function () {
                resizenow();
            });

            function resizenow() {
                var browserwidth = jQuery(window).width();
                var browserheight = jQuery(window).height();
                jQuery('.bonfire-pageloader-icon').css('right', ((browserwidth - jQuery(
                    ".bonfire-pageloader-icon").width()) / 2)).css('top', ((browserheight - jQuery(
                    ".bonfire-pageloader-icon").height()) / 2));
            };
            resizenow();
            let uesrInfo,
                name,
                api,
                picWidth,
                picHeight,
                src
            $.post(userInfoUrl, (res) => {
                // console.log(res)
                uesrInfo = res.obj
                name = uesrInfo.fdNickname
                if (uesrInfo.fdSex == 0) {
                    $('.userSex').text('女')
                } else {
                    $('.userSex').text('男')
                }
                $('.userName').text(name)


                $('.name_list').click(() => {
                    $('.name_model').fadeIn('fast')
                    $('.changeUserName').val(name)
                })
                $('.cancel').click(() => $('.name_model').fadeOut('fast'))

                //修改用户名
                $('.confirm ').click(function () {
                    $.post(nameUrl, {
                        name: $('.changeUserName').val()
                    }, (res) => {
                        console.log(res)
                        alert(res.msg)
                        $('.userName').text(res.obj.fdNickname)
                        $('.name_model').fadeOut('fast')
                    })
                })

                //性别
                $('.sex_list').click(() => $('.sex_model').fadeIn('fast'))
                $('.doCancel').click(() => $('.sex_model').fadeOut('fast'))
                $('.confirmSex div').click(function () {
                    console.log($(this).index())
                    let sex
                    if ($(this).index() == 0) {
                        $('.userSex').text('男')
                        sex = 1
                        $.post(sexUrl, {
                            sex
                        }, (res) => {
                            console.log(res)
                            cancelModle()
                        })
                    } else if ($(this).index() == 1) {
                        $('.userSex').text('女')
                        sex = 0
                        $.post(sexUrl, {
                            sex
                        }, (res) => {
                            console.log(res)
                        })
                        cancelModle()
                    } else if ($(this).index() == 3) {
                        cancelModle()

                    }

                })


            })
            $('.logo_list').click(() => $('.logo_model').fadeIn('fast'))
            $('.doCancel').click(() => $('.logo_model').fadeOut('fast'))
            //取消model
            function cancelModle() {
                $('.sex_model').fadeOut('fast')
            }
            //添加头像

            function getObjectURL(file) {
                var url = null;
                if (window.createObjectURL != undefined) { // basic
                    url = window.createObjectURL(file);
                } else if (window.URL != undefined) { // mozilla(firefox)
                    url = window.URL.createObjectURL(file);
                } else if (window.webkitURL != undefined) { // webkit or chrome
                    url = window.webkitURL.createObjectURL(file);
                }
                return url;
            }

            $('#thumbnail').change(function () {
                $('.picture_model').fadeIn('fast')
                $('.doCancel').click(() => window.location.href='./personalInfo.html')
                src = getObjectURL($(this)[0].files[0])
                $('#target').attr('src', src)


                if (src != '') {
                    $('#target').Jcrop({
                        bgOpacity: 0.5,
                        bgColor: '#000',
                        baseClass: 'jcrop',
                        onChange: showCoords, //当选择区域变化的时候，执行对应的回调函数
                        onSelect: showCoords //当选中区域的时候，执行对应的回调函数
                    }, function () {
                        api = this;
                        api.setSelect([65, 65, 65 + 300, 65 + 300]);
                        // api.disable()
                        api.setOptions({
                            bgFade: true,
                            minSize: [150, 150],
                            maxSize: [300, 300],
                            'allowSelect': false
                        });
                        api.ui.selection.addClass('jcrop-selection');
                        console.log(this.tellScaled())
                    });
                    // console.log($('#target').Jcrop())    
                }
                $('.addPic').click(function () {
                $('#bonfire-pageloader').fadeIn('fast')
                $('.picture_model').fadeOut('fast')
                    
                    var image = new Image();
                    image.src = src;
                    image.onload = function () {
                        var avatar = getBase64Image(image);
                        $.post(logoUrl, {
                            avatar
                        }, (res) => {
                            
                            setTimeout(() => {
                                $('#bonfire-pageloader').fadeOut('fast')
                                alert('修改成功')
                                window.location.href='./personal.html'
                            }, 2000)
                        })

                    }
                })

                function getBase64Image(img) {
                    var canvas = document.createElement("canvas");
                    // canvas.width = img.width;
                    // canvas.height = img.height;
                    canvas.width = picWidth;
                    canvas.height = picHeight;
                    var ctx = canvas.getContext("2d");
                    ctx.drawImage(img, 0, 0, letB, rightB);
                    var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
                    var dataURL = canvas.toDataURL("image/" + ext);
                    return dataURL;
                }



            });
            let letT,
                letB,
                rightT,
                rightB

            function showCoords(e) {
                console.log(e)
                picWidth = e.w
                picHeight = e.h
                letT = e.x
                letB = e.x2
                rightT = e.y
                rightB = e.y2
            }
        })
    </script>
    <script src="../../js/pageloader.js" type="text/javascript"></script>
</body>

</html>